<template>


  <div class="china-life-carousel">
    <!-- Element Plus 轮播组件 -->
    <el-carousel
      :interval="5000"
      height="420px"
      indicator-position="outside"
      arrow="always"
    >
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <!-- 中国人寿专用样式 -->
        <div class="banner-container">
          <img
            :src="'http://127.0.0.1:8000/'+banner.image"
            :alt="banner.title"
            class="banner-image"
          />
          <div class="banner-overlay">
            <h3 class="banner-title">{{ banner.title }}</h3>
            <p class="banner-desc">{{ banner.description }}</p>
            <h3 class="banner-desc">{{ banner.desc }}</h3>
            <el-button
              type="primary"
              size="large"
              class="banner-button"
              @click="handleClick(banner.link)"
            >
              立即了解
            </el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>



    <!-- 保险产品分类 -->
  <div class="product-categories">
    <div class="category-item" v-for="category in categories" :key="category.id" @click="router.push(category.link)">

      <div class="category-icon">
          <el-icon :size="24">
       <component :is="category.icon" />
     </el-icon>
      </div>
      <div class="category-name">{{ category.name }}</div>
    </div>
  </div>

    <!-- 热门产品推荐 -->
  <div class="hot-products">
    <div class="section-header">
      <h2>热门产品推荐</h2>
      <div class="more-link" @click="router.push('/products')">
        查看更多 <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="product-list">
      <div class="product-card" v-for="product in hotProducts" :key="product.id" @click="handleClick('/products/'+product.id)" >
        <img :src="'http://127.0.0.1:8000/uploads/'+product.img_url" :alt="product.name" class="product-image">
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-price">¥{{ product.price }}起</div>
          <div class="product-features">
            <div class="feature" v-for="(feature, index) in product.features" :key="index">
              <i class="el-icon-check"></i> {{ feature }}
            </div>
           </div>
          </div>
      </div>
    </div>
  </div>

    <div class="customer-service">
      <div class="service-title">在线客服</div>
      <div class="service-methods">
        <div class="method" v-for="method in serviceMethods" :key="method.name">
          <div class="method-icon" @click="handleClick(method.link)">
             <el-icon :size="24">
          <component :is="method.icon" />
        </el-icon>
          </div>
          <div class="method-name">{{ method.name }}</div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import { User, Warning, FirstAidKit, Umbrella, CaretTop } from '@element-plus/icons-vue'
import { Phone, ChatDotRound, ChatLineRound, MapLocation } from '@element-plus/icons-vue'
const router = useRouter();
import axios from "axios";

const banners = ref([]);
const bannerData =()=>{
  axios.get('http://127.0.0.1:8000/goods/banners/')
  .then(response => {
    banners.value = response.data.data;
    })
}

const handleClick = (path) => {
  router.push(path);
};


// 产品分类数据
const categories = ref([
  { id: 1, name: '健康保险', icon: FirstAidKit, link: '/products/health' },
  { id: 2, name: '人寿保险', icon: User, link: '/products/life' },
  { id: 3, name: '意外保险', icon: Warning, link: '/products/accident' },
  { id: 4, name: '养老保险', icon: Umbrella, link: '/products/pension' },
  { id: 5, name: '车险服务', icon: CaretTop, link: '/products/car' }
])

// 热门产品数据
const hotProducts = ref([]);

const hotData =()=>{
  axios.get('http://127.0.0.1:8000/goods/products/')
  .then(response => {
    hotProducts.value = response.data.results.slice(0, 4);
  })
}

// 客服方式
const serviceMethods = ref([
  { name: '电话客服', icon: Phone },
  { name: 'ai咨询', icon: ChatDotRound ,link: '/aichat'},
  { name: '微信服务', icon: ChatLineRound },
  { name: '网点查询', icon: MapLocation }
]);




onMounted(()=>{
  bannerData();
  hotData();
})
</script>

<style scoped>
/* 轮播图容器 */
.china-life-carousel {
  --cl-primary: #e60012;
  --cl-secondary: #003366;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.el-carousel {
  border-radius: 20px;
}

.el-carousel__container {
  height: 420px !important;
}
.el-carousel-item {
  border-radius: 20px;
  overflow: hidden;
}

/* 轮播内容容器 */
.banner-container {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 20px;
  overflow: hidden; /* 确保所有子元素遵守圆角 */
  background: #f0f0f0; /* 图片加载前的背景色 */
}

/* 图片样式 */
.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 确保图片居中显示 */
  display: block; /* 移除图片底部间隙 */
}

/* 文字覆盖层 */
.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 2rem;
  color: white;
  border-radius: 0 0 20px 20px;
  background-clip: padding-box; /* 关键属性 */
}

/* 其他保持原样 */
.banner-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.banner-desc {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.banner-button {
  background-color: var(--cl-primary);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  box-shadow: 0 2px 8px rgba(230, 0, 18, 0.3);
}
/* 适配移动端 */
@media (max-width: 768px) {
  .el-carousel__container,
  .banner-container {
    height: 300px !important;
  }

  .banner-overlay {
    padding: 1rem;
  }
}





/* 产品分类 */
.product-categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 20px;
  background-color:#f0f2f5;
  margin: 20px 0;
  border-radius: 8px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.category-item:hover {
  transform: translateY(-5px);
}

.category-icon {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.category-icon i {
  font-size: 24px;
  color:#3498db;
}

.category-name {
  font-size: 14px;
  color:black;
  font-weight: bold;
}

/* 热门产品 */
.hot-products {
  padding: 20px;
  margin: 20px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  color: deepskyblue;
  font-size: 22px;
  margin: 0;
}

.more-link {
  color:black;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.more-link:hover {
  text-decoration: underline;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color:olivedrab;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 2;
}

.product-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-size: 16px;
  color: lightcoral;
  margin: 0 0 10px 0;
}

.product-price {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
}

.feature i {
  color: purple;
  margin-right: 5px;
  font-size: 12px;
}

/* 在线客服 */
.customer-service {
  background-color:white;
  padding: 20px;
  margin-top: 30px;
  border-radius: 8px;
}

.service-title {
  text-align: center;
  color: black;
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}

.service-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.method-icon {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.method-icon i {
  font-size: 24px;
  color: blue;
}

.method-name {
  font-size: 14px;
  color:black;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-categories {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-methods {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 480px) {
  .product-categories {
    grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  }

  .nav-item {
    font-size: 14px;
    padding: 5px;
  }
}


</style>